<template>
  <scroll-view @scrolltolower="scrolltolower" class="scroll-view" scroll-y>
    <view
      class="distributed_item"
      @tap="handleLookDetail(ele)"
      v-for="(ele, index) in list"
      :key="index"
    >
      <view class="distributed_name">{{ ele.taskName }}</view>
      <view class="distributed_date">
        <text class="iconfont icon-24gl-calendar"></text>
        <text>{{ ele.listenCourseDate }}</text>
      </view>
      <view class="distributed_time">
        <text class="iconfont icon-naozhong"></text>
        <text>{{ ele.startTime + "-" + ele.endTime }}</text>
      </view>
    </view>
    <fl-empty v-if="list.length === 0" />
    <view style="padding: 10rpx 0">
      <view class="none" v-if="isFinish">没有更多了~</view>
      <view class="loadMore" v-if="isMore">正在加载...</view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { courseEvalTaskList } from "@/api/courseEvaluateCont/received";
const query = {
  pageNum: 1,
  pageSize: 10,
  tabType: "0",
};
const list = ref([]);
const total = ref(0);
const isFinish = ref(false);
const isMore = ref(false);
function handleNav(url) {
  uni.navigateTo({ url: url });
}
function scrolltolower() {
  if (query.pageNum * query.pageSize >= total.value) {
    isFinish.value = true;
    isMore.value = false;
    return;
  }
  query.pageNum += 1;
  isMore.value = true;
  getList();
}
async function getList() {
  let res = await courseEvalTaskList(query);

  list.value = [...list.value, ...res.rows];
  total.value = res.total;
}
function handleLookDetail(ele) {
  uni.navigateTo({ url: "/pages/courseEvaluateContTaskLookDetail/index?status=1&id=" + ele.id });
}
onLoad(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.scroll-view {
  height: 100%;

  .distributed_item {
    width: 685rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 auto 30rpx;
    padding: 15rpx 25rpx;
    &:nth-child(1) {
      margin-top: 20rpx;
    }
    .distributed_name {
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 28rpx;
      color: #292929;
      font-weight: 700;
      margin-bottom: 11rpx;
    }
    .distributed_date,
    .distributed_time,
    .distributed_room {
      font-size: 24rpx;
      color: #666666;
      margin: 15rpx 0;
      .iconfont {
        font-size: 24rpx;
        margin-right: 8rpx;
      }
    }
  }
}
</style>
